<template>

  <t-row>
    <t-col :span="6">
      <t-card title="健康" bordered hover-shadow class="card">
        <t-row justify="center">
          <t-space :size="10" align="center">
            <t-icon v-if="serverStatus.load < 50" name="check-circle-filled" style="color: green" size="40px"></t-icon>
            <t-icon v-else-if="serverStatus.load < 70" name="error-circle-filled" style="color: darkgoldenrod"
              size="40px"></t-icon>
            <t-icon v-else name="error-circle-filled" style="color: darkred" size="40px"></t-icon>
            <span style="font-size: 20px">您的服务器运行{{ serverStatus.load < 50 ? '良好' : serverStatus.load < 70 ? '负载较高'
              : '负载过高' }}</span>
          </t-space>
        </t-row>
        <template #actions>
          <a @click.prevent="router.replace({ name: 'serverOverview', params: { id: statusStore.currentServerId } })"><t-icon
              name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>

    <t-col :span="6">
      <t-card title="用户" bordered hover-shadow class="card">
        <t-space :size="20">
          <t-statistic title="已注册用户" :value="34">
            <template #prefix> </template>
          </t-statistic>

          <t-statistic title="已登录用户" :value="2">
            <template #prefix> </template>
          </t-statistic>
        </t-space>
        <template #actions>
          <a @click.prevent="router.replace({ name: 'serverUser', params: { id: statusStore.currentServerId } })"><t-icon
              name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>
  </t-row>

  <t-row>
    <t-col :span="12">
      <t-card title="状态" bordered hover-shadow class="card">

        <t-row justify="center">
          <t-space align="center" :size="20">

            <t-space align="center" direction="vertical">
              <span class="statusText">CPU</span>
              <t-progress theme="circle" :percentage="serverStatus.CPU" />
              <span class="statusText">CPU</span>
            </t-space>
            <t-space align="center" direction="vertical">
              <span class="statusText">内存</span>
              <t-progress theme="circle" :percentage="serverStatus.memory" />
              <span class="statusText">内存</span>
            </t-space>

            <t-space align="center" direction="vertical">
              <span class="statusText">负载</span>
              <t-progress theme="circle" :percentage="serverStatus.load" />
              <span class="statusText">负载</span>
            </t-space>

            <t-space align="center" direction="vertical">
              <span class="statusText">硬盘</span>
              <t-progress theme="circle" :percentage="serverStatus.harddisk" />
              <span class="statusText">硬盘</span>
            </t-space>


          </t-space>
        </t-row>

        <template #actions>
          <a @click.prevent="router.replace({ name: 'serverOverview', params: { id: statusStore.currentServerId } })"><t-icon
              name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>
  </t-row>

  <t-row>
    <t-col :span="12">
      <t-card title="信息" bordered hover-shadow class="card">
        <t-descriptions title="基本信息" size="large">

          <t-descriptions-item label="IPv4地址">{{ staticInfo.ipv4 }}</t-descriptions-item>
          <t-descriptions-item label="IPv6地址">{{ staticInfo.ipv6 }}</t-descriptions-item>
          <t-descriptions-item label="系统版本">{{ staticInfo.systemVersion }}</t-descriptions-item>
          <t-descriptions-item label="已开机时间">{{ staticInfo.upTime }}</t-descriptions-item>

        </t-descriptions>
        <t-descriptions title="其他信息" size="large">

          <t-descriptions-item label="系统架构">x86_64</t-descriptions-item>
          <t-descriptions-item label="主机名">vm</t-descriptions-item>

        </t-descriptions>


        <template #actions>
          <a @click.prevent="router.replace({ name: 'serverLog', params: { id: statusStore.currentServerId } })"><t-icon
              name="info-circle"></t-icon></a>
        </template>
      </t-card>
    </t-col>
  </t-row>


</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStatusStore } from '@/stores'
import type { TableProps } from 'tdesign-vue-next'
import axios from 'axios'
const router = useRouter()
const statusStore = useStatusStore()
const serverStatus = ref({ CPU: 34, memory: 45, load: 30, harddisk: 17 })
const staticInfo = ref({ ipv4: '192.168.10.101', ipv6: 'fe80::20c:29ff:fef5:8a67', systemVersion: 'Ubuntu 24.04', upTime: '1:12:24', load: 30 })

onMounted(() => {
  axios.post(`/api/command/${statusStore.currentServerId}?command=collect_server_status`)
    .then(({data}) => {
      console.log(JSON.parse(data.data.message))
    })
})

const columns = ref<TableProps['columns']>([
  { colKey: 'name', title: '服务器名称' },
  { colKey: 'status', title: '状态' },
  { colKey: 'ipaddr', title: 'IP地址' },
  { colKey: 'uptime', title: '日志' },
])

const data = ref<TableProps['data']>([
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 2, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 3, name: '测试2', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
  { index: 1, name: '测试1', status: '良好', ipaddr: '192.168.1.1', uptime: '2025-01-03' },
])
</script>

<style scoped>
.container {
  justify-content: center;
}

.card {
  margin: 10px;
  min-height: 170px;
  max-height: 800px;
  overflow: auto;
}
</style>